<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>客户端</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app" class="container">
<h1>Vue.js+Axios+Bootstrap</h1>
<div v-show="noticeListContainer">
    <from id="queryForm" style="display: inline">
        <input type="text" name="title" id="titleId" placeholder="请输入标题">
        <input type="button" value="查询" @click="doQueryNotices()">
    </from>
    <button @click="doDisplay">添加</button>
    <table class="table">
        <thead>
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>类型</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr  v-for="(n,i) in notices" :key="i">
                <td>{{i+1}}</td>
                <td>{{n.title}}</td>
                <td>{{n.type}}</td>
                <td>{{n.status}}</td>
                <td>{{n.createdTime}}</td>
                <td>
                    <button @click="doDeleteById(n.id)">delete</button>
                    <button @click="doFindById(n.id)">update</button>
                </td>
            </tr>
        </tbody>
    </table>

    <div class="pagination">
        <button class="pre" @click="doJumpToPage">上一页</button>
        <button class="percent">{{pageCurrent}}/{{pageCount}}</button>
        <button class="next" @click="doJumpToPage">下一页</button>
        <form id="pageForm" style="display: inline">
            <input type="text" name="pageCurrent" id="pageNumId">
            <input type="button" value="跳转" class="jump" @click="doJumpToPage">
        </form>
    </div>
</div><!--noticeListContainer-->

<div  v-show="noticeEditContainer">
    <h2>编辑区</h2>
    <form id="noticeEditForm">
        <input type="hidden" v-model="id">
        <div class="form-group">
            <label for="typeId">类型:</label>
            <select class="form-control" v-model="type" id="typeId">
                <option value="1">通知</option>
                <option value="2">公告</option>
            </select>
        </div>
        <div class="form-group">
            <label for="tId">标题:</label>
            <input type="text" class="form-control" v-model="title" id="tId" placeholder="请输入标题">
        </div>
        <div class="form-group">
            <label for="contentId">内容:</label>
            <textarea class="form-control" rows="5" v-model="content" id="contentId" placeholder="请输入内容"></textarea>
        </div>
        <div class="form-group">
            <label>状态:</label>
            <label class="radio-inline">
                <input type="radio" name="status" v-model="status" value="0" checked>正常
            </label>
            <label class="radio-inline">
                <input type="radio" name="status" v-model="status" value="1">关闭
            </label>
        </div>
        <button type="button" class="btn btn-default submit" @click="doSaveOrUpdate">提交</button>
        <button type="button" class="btn btn-default cancel" @click="doBack">取消</button>
    </form>
</div><!--noticeEditContainer-->

</div><!--app-->

<script src="./libs/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            notices:[],
            id:"",
            title:"",
            content:"",
            type:1,
            status:0,
            pageCurrent:1,
            pageCount:1,
            noticeListContainer:true,
            noticeEditContainer:true,
        },
        methods:{
            doBack(){
                this.noticeListContainer=true;
                this.noticeEditContainer=false;
            },
            doDisplay(){
                this.noticeListContainer=false;
                this.noticeEditContainer=true;
            },
            doFindById(id){
                console.log(id);
                let url=`http://localhost/notice/${id}`;
                axios.get(url).then((response)=>{
                    let result=response.data;
                    if (result.state==1){
                        this.id=result.data.id;
                        this.title=result.data.title;
                        this.content=result.data.content;
                        this.type=result.data.type;
                        this.status=result.data.status;
                        this.doDisplay();
                    }else{
                        alert(result.message);
                    }
                })
            },
            doSaveOrUpdate(){
              let url=`http://localhost/notice/`;
              let params={
                  "id":this.id,
                  "title":this.title,
                  "content":this.content,
                  "type":this.type,
                  "status":this.status
              }
                axios({
                    method: this.id?'put':'post',
                    url: url,
                    data: params
                }).then((response)=>{
                  let result=response.data;
                  if(result.state==1){
                      alert(result.message);
                      this.doGetNotices();
                      this.doResetForm();
                      this.doBack();
                  }else{
                      alert(result.message);
                  }
              });
            },
            doResetForm(){
                this.id="",
                this.title="",
                this.content="",
                this.type=1,
                this.status=0
            },
            doDeleteById(id){
                let url=`http://localhost/notice/${id}`;
                axios.delete(url).then((response)=>{
                    let result=response.data;
                    if (result.state==1){
                        alert(result.message);
                        let rows=document.querySelector("table>tbody").children.length;
                        if(this.pageCurrent>1&&rows==1){
                            this.pageCurrent--;
                        }
                        this.doGetNotices();
                    }else{
                        alert(result.message);
                    }
                })
            },
            doQueryNotices(){
                this.pageCurrent=1;
                this.doGetNotices();
            },
            doJumpToPage(event){
                let cls=event.target.getAttribute("class");
                // console.log("cls",cls);
                if(cls=="pre"&&this.pageCurrent>1){
                    this.pageCurrent--;
                }else if(cls=="next"&&this.pageCurrent<this.pageCount){
                    this.pageCurrent++;
                }else if(cls=="jump"){
                    let input=document.getElementById("pageNumId");
                    let pageNum=input.value;
                    if(pageNum>this.pageCount || pageNum<1){
                        alert("页码值不正确");
                        return;
                    }
                    this.pageCurrent=pageNum;
                    input.value='';
                }else{return;}
                this.doGetNotices();
            },
            doGetNotices(){
                let title=document.getElementById("titleId").value;
                let url=`http://localhost/notice/`;
                axios.get(url,{
                    params:{
                        pageCurrent:this.pageCurrent,
                        title:title
                    }
                }).then(function (resposnse) {
                    let jsonResult=resposnse.data;
                    // console.log(jsonResult);
                    this.vm.notices=jsonResult.data.list;
                    this.vm.pageCurrent=jsonResult.data.pageNum;
                    this.vm.pageCount=jsonResult.data.pages;
                })
            }
        },
        mounted(){
            this.doGetNotices();
        }
    })
</script>
</body>
</html>